<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <areas ref="tree" :areas="treeAreas" v-on:handleNodeClick="onHandleNodeClick" />
      </el-col>
      <el-col :span="20" :xs="24" >
        <el-card v-loading="listLoading">
          <div class="app-container" id="online-chart" >
            <pie-chart :chart-data="chartData" :title="['电路故障', '传感器预警','漏水报警','空管','发生复位','反装预警']"/>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import areas from '@/components/area/AreaTree'
import PieChart from "./components/PieChart";
import {deviceFault} from "@/api/analysis";
import {getAreaTree} from "@/api/area";

export default {
  name: 'index',
  components:{PieChart, areas},
  data() {
    return {
      chartData: [],
      listQuery:{
        code:'',
        is_contains_sub: this.$store.getters.showSubData,
      },
      treeAreas:[],
      listLoading:false
    }
  },
  created() {
    this.getList()
    this.getAreaTree()
  },
  methods: {
    onHandleNodeClick:function (data) {
      if(this.listQuery.code !== data.code){
        this.listQuery.code = data.code
        this.getList()
      }
    },
    getAreaTree(type){
      getAreaTree({type:2,is_contains_sub: this.$store.getters.showSubData}).then(response => {
        this.treeAreas = response.data
      })
    },
    getList(){
      this.listLoading = true
      let data = Object.assign({},this.listQuery)
      data.duration = data.duration || 2
      deviceFault(data).then(resp => {
        this.listLoading = false
        if(resp.code === 20000){
          let d = []
          d.push({name:'电路故障',value:resp.data.electrica_fault_count})
          d.push({name:'传感器预警',value:resp.data.sensor_fault_count})
          d.push({name:'漏水报警',value:resp.data.leakage_fault_count})
          d.push({name:'空管',value:resp.data.atc_fault_count})
          d.push({name:'发生复位',value:resp.data.reset_fault_count})
          d.push({name:'反装预警',value:resp.data.reverse_fault_count})
          d.push({name:'正常',value:resp.data.normal})
          this.chartData = d

        }
      })
    }
  }
}
</script>
